<template>
  <div style="padding: 10px">
    <d-table
      :data="tableData"
      :columns="columns"
      border
      show-overflow-tooltip
      :showPagination="false"></d-table>
  </div>
</template>

<script lang="ts" setup>
  const columns = [
    { label: '排序', cType: 'index' },
    { label: '日期', prop: 'date', cType: 'date', format: 'YYYY-MM' },
    {
      label: '姓名',
      prop: 'name',
      cType: 'link',
      onClick: (row, column, index) => {
        console.log(row, column, index)
      }
    },
    {
      label: '可点击金额',
      prop: 'money',
      cType: 'link',
      align: 'right',
      format: { type: 'money', decimal: 2 },
      onClick: (row, column, index) => {
        console.log(row, column, index)
      }
    },
    { label: '普通金额', prop: 'money', align: 'right', format: { type: 'money', decimal: 2 } },
    { label: '地址', prop: 'address' },
    {
      label: '字典',
      prop: 'dictValue',
      cType: 'dict',
      color: {
        '1': 'green'
      },
      dictProps: {
        dict: 'dictName',
        field: 'fieldName',
        label: 'name',
        value: 'id',
        storage: 'localStorage'
      }
    }
  ]
  const tableData = [
    {
      date: '2016-05-03',
      name: 'Tom',
      money: 10000,
      dictValue: 1,
      address: 'No. 189, Grove St, Los Angeles'
    },
    {
      date: '2016-05-02',
      name: 'Tom1',
      money: 100,
      dictValue: 3,
      address: 'No. 189, Grove St, Los Angeles'
    },
    {
      date: '2016-05-04',
      name: 'Tom2',
      money: 200.897,
      dictValue: 2,
      address: 'No. 189, Grove St, Los Angeleshdsiahdiahdohdaodh dhsioahdoahdoahdsoihdadhao'
    },
    {
      date: '2016-05-01',
      name: 'Tom3',
      money: 1430,
      dictValue: 4,
      address: 'No. 189, Grove St, Los Angeles'
    }
  ]
  // 缓存对象为dict
  const options = {
    fieldName: [
      { name: 'dict选项1', id: '1' },
      { name: 'dict选项2', id: '2' },
      { name: 'dict选项3', id: '3' }
    ]
  }
  localStorage.setItem('dictName', JSON.stringify(options))
</script>
<style scoped lang="scss"></style>
